<template>
  <div>
    <a-modal :title="type == 'product' ? '商品备注' : '订单备注'" :footer="false" @open="open" :visible="visible" @cancel="handleCancel" :align-center="false" title-align="start" width="450px" :mask-closable="false">
      <div class="input">
        <a-textarea v-model="remark" style="width: 100%; height: 100%"></a-textarea>
      </div>

      <div class="footer">
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" style="margin-left: 10px" @click="handleOk">确定</a-button>
      </div>

      <a-scrollbar style="max-height: 200px; overflow: auto; margin-top: 10px" v-if="type != 'product'">
        <ul class="remark-list">
          <li v-for="item of remarkList">
            <div class="top">
              <div>{{ item.createUname ? item.createUname.slice(0, 1) : '无' }}</div>
              <div>{{ item.createUname ? item.createUname.slice(0, 1) : '字段无内容' }}</div>
              <div>{{ $setTime(item.gmtCreate) }}</div>
            </div>
            <div class="text"> {{ item.remark }} </div>
          </li>
        </ul>
      </a-scrollbar>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { fbmPage, updateItemRemark, saveOrUpdateOrderRemark } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: {
      info: {
        type: Object,
      },
      type: {
        type: String,
        default: 'product',
      },
    },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        remark: '',
        remarkList: [],
      })

      const open = () => {
        // getDetail()
        console.log(props.info, props.type)

        if (props.type == 'product') {
          data.remark = props.info.remark
        } else {
          data.remarkList = props.info.remarkList
          console.log(props.info.remarkList)
        }
      }
      const handleOk = async () => {
        if (!data.remark) {
          return Message.error('请输入备注内容')
        }
        let params: any = {}
        let res: any = {}
        data.loading = true
        if (props.type == 'product') {
          params = {
            orderItemIdList: [props.info.id],
            remark: data.remark,
          }
          res = await updateItemRemark(params)
        } else {
          params = [
            {
              orderId: props.info.id,
              remark: data.remark,
            },
          ]
          res = await saveOrUpdateOrderRemark(params)
        }

        data.loading = false
        if (res.code == 'SUCCESS') {
          props.type != 'product' ? Message.success('添加备注成功') : Message.success('备注修改成功')
          emit('save')
          data.remark = ''
          visible.value = false
        }
      }
      const handleCancel = () => {
        data.remark = ''
        data.loading = false
        visible.value = false
      }

      // const getDetail = async () => {
      //   let params = {
      //     idList: props.info.id,
      //   }
      //   const res = await fbmPage(params)
      // }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped>
  .input {
    width: 100%;
    height: 150px;
  }

  .footer {
    margin-top: 10px;
    text-align: right;
  }
  .remark-list {
    li {
      width: 100%;
      margin-bottom: 10px;
      .text {
        font-size: 12px;
      }
      .top {
        display: flex;
        height: 30px;
        line-height: 30px;
        div {
          margin-right: 10px;
          &:nth-child(1) {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: white;
            border-radius: 50%;
            background-color: rgb(var(--primary-6));
            margin-top: 5px;
          }
          &:nth-child(2) {
            // margin-left: 10px;
          }
          &:nth-child(3) {
            font-size: 12px;
            color: #b3b3b3;
            // margin-left: 10px;
          }
        }
      }
    }
  }
</style>
